import React, { memo, Suspense } from "react";

import { renderRoutes } from "react-router-config";

import store from "./store";

import { Provider } from "react-redux";
import CAppFooter from "@/components/app-footer";
import CAppHeader from "@/components/app-header";
import CLAppPlayerBar from "./pages/player/app-player-bar";

import routes from "./routes";
import { HashRouter } from "react-router-dom";

export default memo(function App() {
  return (
    <Provider store={store}>
      <HashRouter>
        <CAppHeader />

        <Suspense fallback={<div>loading</div>}>
          {renderRoutes(routes)}
        </Suspense>
        <CAppFooter />
        <CLAppPlayerBar />
      </HashRouter>
    </Provider>
  );
});
